<template>
  <div id="box">
    <ShoppingCartHeader />
    <ul>
      <ShoppingCartContent />
    </ul>
    <ShoppingCartFooter />
  </div>
</template>

<script setup>
import ShoppingCartHeader from './components/ShoppingCartHeader.vue'
import ShoppingCartContent from './components/ShoppingCartContent.vue'
import ShoppingCartFooter from './components/ShoppingCartFooter.vue'

import { ref, onMounted } from 'vue'
import emitter from './eventBus.js'
let datas = ref([
  { id: 1, isChecked: false, goodName: '红米', count: 1, price: 1700 },
  { id: 2, isChecked: true, goodName: 'iqoo', count: 1, price: 2700 },
])
// 页面加载时发送datas数据
onMounted(() => {
  emitter.emit('datasContent', datas)
  emitter.on('datasBack', (data) => {
    datas.value = data
    emitter.emit('datasContent', datas)
  })
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#box {
  width: 300px;
}
</style>